<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ID Reader Device Test Page</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
  </head>
  <body>
    <div class="container">
      <h1>ID Reader Device Test Page</h1>
      
      <button id="open-device" class="btn btn-primary">Open Device</button>
      <button id="close-device" class="btn btn-danger">Close Device</button>
      
      <button id="get-donsee-version-beep" class="btn btn-info">Get Version</button>
      <button id="get-idcard-info" class="btn btn-success">Get ID Card Info</button>
      <button id="get-sicard-info" class="btn btn-success">Get SI Card Info</button>
      <button id="get-bankcard-info" class="btn btn-success">Get Bank Card Info</button>
      <button id="get-m1card-info" class="btn btn-success">Get M1 Card Info</button>

      <div id="messages" class="alert mt-3" role="alert"></div>
      
      <h2>Version</h2>
      <div id="donsee-version-info" class="alert alert-info" role="alert"></div>
      
      <h2>ID Card Info</h2>
      <table id="idcard-info" class="table table-bordered">
        <thead>
          <tr>
            <th width="30%">Field</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      
      <h2>SI Card Info</h2>
      <table id="sicard-info" class="table table-bordered">
        <thead>
          <tr>
            <th width="30%">Field</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>

      <h2>Bank Card Info</h2>
      <table id="bankcard-info" class="table table-bordered">
        <thead>
          <tr>
            <th width="30%">Field</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>

      <h2>M1 Card Info</h2>
      <table id="m1card-info" class="table table-bordered">
        <thead>
          <tr>
            <th width="30%">Field</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>

    </div>
    
    <script>
      $(document).ready(function() {
        $('#open-device').click(function() {
          $.post('/open-device', function(data) {
            $('#messages').removeClass('alert-success alert-danger');
            if (data.error) {
              $('#messages').addClass('alert-danger').text(data.message);
            } else {
              $('#messages').addClass('alert-success').text(data.message);
            }
          });
        });

        $('#close-device').click(function() {
          $.post('/close-device', function(data) {
            $('#messages').removeClass('alert-success alert-danger');
            if (data.error) {
              $('#messages').addClass('alert-danger').text(data.message);
            } else {
              $('#messages').addClass('alert-success').text(data.message);
            }
          });
        });
        
        $('#get-idcard-info').click(function() {
          $.post('/get-idcard-info', function(data) {
            $('#messages').removeClass('alert-success alert-danger');
            if (data.error) {
              $('#messages').addClass('alert-danger').text(data.message);
            } else {
              $('#messages').addClass('alert-success').text('ID Card Info retrieved successfully');
              $('#idcard-info tbody').empty();
              $.each(data.data.info, function(key, value) {
                $('#idcard-info tbody').append('<tr><td>' + key + '</td><td>' + value + '</td></tr>');
              });
              $('#idcard-info tbody').append('<tr><td>Image</td><td><img src="' + data.data.image_path + '" alt="ID Card Image"></td></tr>');
            }
          });
        });
        
        $('#get-sicard-info').click(function() {
          $.post('/get-sicard-info', function(data) {
            $('#messages').removeClass('alert-success alert-danger');
            if (data.error) {
              $('#messages').addClass('alert-danger').text(data.message);
            } else {
              $('#messages').addClass('alert-success').text('SI Card Info retrieved successfully');
              $('#sicard-info tbody').empty();
              $.each(data.data.info, function(key, value) {
                $('#sicard-info tbody').append('<tr><td>' + key + '</td><td>' + value + '</td></tr>');
              });
            }
          });
        });

        $('#get-bankcard-info').click(function() {
          $.post('/get-bankcard-info', function(data) {
            $('#messages').removeClass('alert-success alert-danger');
            if (data.error) {
              $('#messages').addClass('alert-danger').text(data.message);
            } else {
              $('#messages').addClass('alert-success').text('Bank Card Info retrieved successfully');
              $('#bankcard-info tbody').empty();
              $('#bankcard-info tbody').append('<tr><td>Card Number</td><td>' + data.data[1] + '</td></tr>');
            }
          });
        });

        $('#get-donsee-version-beep').click(function() {
          $.post('/get-donsee-version-beep', function(data) {
            $('#messages').removeClass('alert-success alert-danger');
            if (data.error) {
              $('#messages').addClass('alert-danger').text(data.message);
            } else {
              $('#messages').addClass('alert-success').text('Donsee Version Info retrieved successfully');
              $('#donsee-version-info').text(data.version);
            }
          });
        });

        $('#get-m1card-info').click(function() {
          $.post('/get-m1card-info', function(data) {
            $('#messages').removeClass('alert-success alert-danger');
            if (data.error) {
              $('#messages').addClass('alert-danger').text(data.message);
            } else {
              $('#messages').addClass('alert-success').text('M1 Card Info retrieved successfully');
              $('#m1card-info tbody').empty();
              $('#m1card-info tbody').append('<tr><td>M1 Card Info</td><td>' + data.data.info + '</td></tr>');
            }
          });
        });
      });
    </script>
  </body>
</html>
